<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>贪吃蛇 by RaoPan</title>
</head>

<body>
    <!-- 背景 -->
    <!-- 背景颜色 -->
    <div class="color"></div>
    <div class="color"></div>
    <div class="color"></div>
    <!-- <div class="box"> -->
    <!-- 背景圆 -->
    <div class="circle" id="circle1" style="--x:0"></div>
    <div class="circle" id="circle2" style="--x:1"></div>
    <div class="circle" id="circle3" style="--x:2"></div>
    <div class="circle" id="circle4" style="--x:3"></div>
    <div class="circle" id="circle5" style="--x:4"></div>
    <!-- </div> -->

    <!-- 游戏介绍 -->
    <div id="introduction">
        <h1>贪吃蛇</h1>
        <div id="operation">
            <h4>操作方式</h4>
            <p>wasd或者方向键控制</p>
            <p>双击鼠标左键暂停，wasd或方向键继续</p>
        </div>
    </div>

    <div id="main">
        <!-- 游戏主界面 -->
        <div id="stage">

            <!-- 蛇🐍 -->
            <div id="snake">
                <!--snake内部的div 表示蛇的各部分-->
                <div></div>
            </div>

            <!-- 食物，由四个盒子组成 -->
            <div id="food">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>

        <!-- 游戏积分 -->
        <div id="score-panel">
            <div>
                Score: <span id="score">0</span>
            </div>
            <div>
                Level: <span id="level">1</span>
            </div>
        </div>
    </div>
</body>

</html>